<template>
  <div id="award">
    <a class="logo"></a>
    <h1>Our Achievements</h1>
    <div class="container">
      <div class="card1">
        <div class="img-bac"></div>
        <h3>专业竞赛</h3>
        <hr>
        <div text-algin="left">
          <p>江西省软件服务外包大赛<br>中国智能机器人大赛<br>中国大学生计算机设计大赛<br>江西省计算机作品大赛</p>
        </div>
      </div>
      <div class="card2">
        <div class="img-bac"></div>
        <h3>项目实例</h3>
        <hr>
        <div>
          <p>江西师范大学管理决策评价研究中心<br>江西师范大学学生工作综合办公平台<br>江西师范大学国际教育学院<br>江西师范大学五河治理项目建设管理系统</p>
        </div>
      </div>
      <div class="card3">
        <div class="img-bac"></div>
        <h3>就业成绩</h3>
        <hr>
        <div>
          <p>宏奕的一些学长们已经成功挑战阿里巴巴，腾讯，百度三大巨头急360等知名互联网企业HR,博得offer,现已成为学院30年来就业率质量最高的团队</p>
        </div>
      </div>

    </div>
    <p>
      You never know how strong you really are until being strong is the only choice you have.
    </p>
  </div>
</template>

<script>
  /*
      为了给对应的对象正确的样式， 必须一一对应
      cardIndex 数组的值  => cardObjs的下标
      cardIndex 的下标 => card 

      这个动画流畅的关键在于 点击图片后，图片上层的自动的向下滑动
  */
  import {
    constants,
    open
  } from 'fs';
  export default {
    name: 'award',
    data() {
      return {
        cards: ['']
      }
    },
    methods: {
      cardAnimationStart() {
        this.cards = [{
            rotate: -15,
            zIndex: 4
          },
          {
            rotate: 0,
            zIndex: 5
          },
          {
            rotate: 15,
            zIndex: 6
          }
        ]
        //卡牌对象数组
        this.cardObjs = Array.prototype.slice.call(document.querySelectorAll('.container>div'))
        this.cardObjsLen = this.cardObjs.length
        //是否呈扇形打开
        this.showOpen = true
        //绑定事件
        for (let j = 0; j < this.cardObjsLen; j++) {
          this.cardObjs[j].index = j;
          this.cardObjs[j].ontouchstart = this.cardAnimationController
        }
      },
      clickImg(currentTarget) {
        // 先清空旋转,因为动画要恢复
        for (let i = 0; i < this.cardObjsLen; i++) {
          this.cardObjs[i].style.transform = 'rotate(0deg)'
        }
        //拿到当前点击元素的显示层叠位置
        var currentTargetIndex = this.cardObjs.indexOf(currentTarget)
        //取出目标，后元素左移
        var cardTemp = this.cardObjs.splice(currentTargetIndex, 1)[0]
        //添加元素至末尾
        this.cardObjs.push(cardTemp)

        // 为了视觉动画先处理新的层叠顺序
        this.cardObjs.forEach((cardObj, cardsObjIndex) => {
          cardObj.style.zIndex = this.cards[cardsObjIndex].zIndex
        });

        //当前的浮动层数不是最上层层数执行动画
        currentTarget.style.transition = 'none'
        currentTarget.style.opacity = '0'
        currentTarget.style.transform = 'translate(20vh,-20vh) rotate(20deg) scale(0.5)'
        //延时动画
        setTimeout(() => {
          currentTarget.style.transition = 'all 0.5s '
          currentTarget.style.opacity = '1'
          currentTarget.style.transform = 'rotate(0deg)'
        }, 0)
        //当前的浮动层数不是最上层层数执行动画
      },
      showCard() {
        this.cardObjs.forEach((cardObj, cardsObjIndex) => {
          cardObj.style.transform = 'rotate(' + this.cards[cardsObjIndex].rotate + 'deg)'
        });
      },
      cardAnimationController(event) {
        if (this.showOpen) {
          this.clickImg(event.currentTarget)
          this.showOpen = false
        } else {
          this.showCard()
          this.showOpen = true
        }
      }
    },
    mounted() {
      //动画开始
      this.cardAnimationStart()
    }
  }

</script>

<style src="@STATIC/css/award.css" />
